<template>
  <!-- <div class="swiper">
    <div class="capture" id="capture0">

      <img
        class="bg"
        src="https://img2.baidu.com/it/u=1168755093,1706419808&fm=253&fmt=auto&app=138&f=JPEG?w=754&h=500"
        alt=""
      />
      <div>
        <span style="color: #f00; letter-spacing: 20px">这是文字文字</span>
        <span data-html2canvas-ignore="true">不写入canvas</span>
      </div>
      <div @click="shareImg(0)">点击分享</div>
    </div>
  </div> -->
  <div class="show" @click="showMessage"> 展示tip </div>

  <!-- <iframe
    height="1080"
    src="https://yk3.gokuai.com/file/hcte2e47xa15gmyw3qxvokcnz29lv0xf#!::%E6%95%99%E6%9D%90%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E%EF%BC%9A%E5%A6%82%E4%BD%95%E7%94%A8%E6%95%99%E6%9D%90%E8%AE%BE%E8%AE%A1%E4%B8%80%E5%A0%82%E8%AF%BE%EF%BC%88%E5%AE%8C%E6%95%B4%E7%89%88%EF%BC%89.pdf:"
    width="100%"
  ></iframe> -->
</template>

<script setup lang="ts">
  import HelloWorld from '@/components/HelloWorld.vue'
  import SvgIcon from '@/components/SvgIcon.vue'
  import testStr from '@/utils/test.js'
  import { useCounterStore } from '@/stores/index'
  import { useIndexedDBStore } from '@/stores/indexedDB'
  import { code } from './xxx.json'
  import { Icon } from '@iconify/vue'
  import http from '@/utils/http'
  import axios from 'axios'
  import { ref, effect, reactive, toRef, toRefs } from 'vue'
  import { useMessage } from '@/hooks'

  import html2canvas from 'html2canvas'

  function showMessage() {
    useMessage()
  }

  function handleExportFile() {
    console.log('html2canvas', html2canvas)
  }

  const autoPicture = async (el, options) => {
    let {
      scale = 1,
      allowTaint = false,
      useCORS = true,
      width = '375',
      height = '649',
      backgroundColor = null
    } = options
    const id = document.getElementById(el)
    const canvas = await html2canvas(id, {
      scale, //缩放比例,默认为1
      allowTaint, //是否允许跨域图像污染画布
      useCORS, //是否尝试使用CORS从服务器加载图像
      width, //画布的宽度
      height, //画布的高度
      backgroundColor //画布的背景色，默认为透明
    })
    return canvas.toDataURL('image/png')
  }

  const show = ref(false)
  const currentImg = ref('')

  const shareImg = async (index) => {
    console.log('index:', index)
    const el = document.getElementById(`capture${index}`)
    console.log('el:', el)
    // const canvasFalse = document.createElement('canvas')
    const width = parseInt(window.getComputedStyle(el).width)
    const height = parseInt(window.getComputedStyle(el).height)
    console.log('width:', width, 'height:', height)
    let canvas = await autoPicture(`capture${index}`, { width, height })
    if (canvas) {
      currentImg.value = canvas
      show.value = true
      // canvas为转换后的Canvas对象
      let oImg = new Image()
      oImg = currentImg.value // 导出图片
      console.log(oImg)
      var oA = document.createElement('a')
      oA.download = '分享内容' // 设置下载的文件名，默认是'下载'
      oA.href = oImg
      document.body.appendChild(oA)
      oA.click()
      oA.remove() // 下载之后把创建的元素删除
    }
  }
</script>

<style lang="scss">
  .capture {
    width: 375px;
    // height: 400px;
    background: #ccc;
    .bg {
      width: 375px;
      height: 600px;
    }
  }
</style>
